<template>
	<view>
		<Header :title="'列表'"></Header>
		<view class="content">
			<view class="top_table">
				<u-subsection :list="tableList" mode="button" @change="sectionChange" :current="current" keyName="name"
					activeColor="#DC1010" inactiveColor="#95989e"> </u-subsection>
			</view>
			<view class="search_box">
				<view class="search_sun">
					<u-search placeholder="关键词搜索" :showAction="false" @search='search' v-model="keyword"></u-search>
				</view>
			</view>
			<view class="swiper" :current="current" :circular="false" :duration="300">
				<!-- 全部 -->
				<view class="swiperItem">
					<scroll-view scroll-y style="height: 80vh;width: 100%;" @scrolltolower="ReachBottom">
						<view class="cardList">
							<view class="cardItem" v-for="(item,i) in renyang" @click="tourl(item)">
								<image class="cardImg" :src="item.url" mode="aspectFill"></image>
								<view class="cardMain">
									<view class="titleName">
										<view class="">{{item.farmName}}</view>
										<view class="">{{item.varietyName}}</view>
									</view>
									<view class="price">
										￥{{item.money}}
									</view>
								</view>
							</view>

							<view class="emptyBox" v-if="renyang.length==0 ">
								<image class="emptyIcon" src="../../../static/empty.png" mode="widthFix"></image>
								<view class="emptyText">
									暂无相关认养！
								</view>
							</view>

						</view>
					</scroll-view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {

		data() {
			return {
				renyang: [],
				patternId: "",
				count: 5,
				value: 5,
				keyword: '',
				current: 0,
				isMouted: false, //避免切换未加载好列表数据，显示了无订单界面

				status: 'loadmore',
				iconType: 'flower',

				pageNum: 1,
				total: 0,
				cont: 1,
				tableList: [],
				varietyId: '',
				current: 0
			}
		},


		async onLoad(e) {

			if (e.cont) {
				this.cont = e.cont
			}
			this.getTable()
		},

		components: {
			Header
		},

		methods: {
			search() {
				this.pageNum = 1
				this.getList()
			},
			sectionChange(index) {
				this.current = index;
				this.varietyId = this.tableList[index].id
				this.keyword = ''
				this.pageNum = 1
				this.getList()
			},
			async getTable() {
				let res = await this.$api.request('farmer/variety/dropDownList')
				let list = res.data
				this.tableList = []
				this.varietyId = res.data[0].id
				list.forEach(item => {
					this.tableList.push({
						name: item.varietyName,
						id: item.id
					})
				})
				this.getList()
			},
			tourl(e) {
			uni.navigateTo({
				url: '/pages/index/adopt/adopt?id='+ e.farmId+'&varietyId='+e.id
			})
			},

			async getList() {
				console.log('getList')
				//认养列表
				let res = await this.$api.request('manage/app/variety/farmList','get',{varietyId: this.varietyId,pageNum:1,pageSize:10})
				this.renyang.push(...res.data.list)
				this.total = res.total
				if (this.renyang.length == this.total) {
					this.status = 'nomore'
				}
				this.isMouted = true

				if (this.pageNum > 1) {
					if (res.data.list.length > 0) {
						this.renyang = this.renyang.concat(res.data.list)
					} else {
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						})
						this.pageNum = this.pageNum - 1; //请求下一页
					}
				} else {
					this.renyang = res.data.list
				}
			},
			ReachBottom() {
				this.pageNum++ //请求下一页
				this.getList()
			},


		}
	}
</script>

<style scoped lang="scss">
	.top_table {
		margin-top: 15rpx;
		width: 690rpx;
		margin-left: 30rpx;
	}

	.search_box {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
	}

	.search_sun {
		width: 600rpx;
	}

	.swiper {
		width: 100%;
		flex: 1;
		box-sizing: border-box;
		height: calc(100vh - 170rpx);


		.swiperItem {

			overflow-y: scroll;

		}


	}

	.cardList {
		display: flex;
		width: 100%;
		padding: 40rpx;
		box-sizing: border-box;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: flex-start;

		.emptyBox {
			width: 100%;
			height: 50vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.emptyText {
				font-size: 32rpx;
				color: #999999;
				margin-top: 20rpx;
			}

			.emptyIcon {
				width: 20%;

			}
		}

		.loadmoreBox {
			width: 100%;
		}

		.cardItem {
			width: calc(100% / 2 - 28rpx + 13rpx);
			background: #FFFFFF;
			box-shadow: 0rpx 7rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);
			border-radius: 20rpx;
			padding: 22rpx 13rpx 28rpx;
			box-sizing: border-box;
			margin-right: 28rpx;
			margin-bottom: 41rpx;

			&:nth-child(2n) {
				margin-right: 0;
			}

			.cardImg {
				width: 100%;
				height: 294rpx;
			}

			.cardMain {
				margin-top: 20rpx;

				.titleName {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.price {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #DC1010;
				}
			}

		}
	}
</style>